<!-- /**
 * 搜索栏公共组件
 */ -->
<template>
  <div class="search-form-box">
    <el-form
      :model="formData"
      ref="formRef"
      :inline="true"
      :label-width="formLabelWidth"
    >
      <el-form-item
        v-for="(item, index) in formOptions"
        :key="newKeys[index]"
        :prop="item.prop"
        :label="item.label ? item.label + '：' : ''"
        :rules="item.rules"
        @keyup.enter.native="onSearch"
      >
        <formItem v-model="formData[item.prop]" :itemOptions="item" />
      </el-form-item>

      <!-- 自定义插槽，可用于特殊表单块 -->
      <slot></slot>
      <div class="search">
        <el-button
          v-if="btnItems.includes('search')"
          size="mini"
          type="primary"
          class="btn-search"
          icon="el-icon-search"
          @click="onSearch"
          >搜索</el-button
        >

        <el-button
          v-if="btnItems.includes('export')"
          size="mini"
          type="primary"
          class="btn-export"
          @click="onExport"
          >导出</el-button
        >

        <el-button
          size="mini"
          type="default"
          class="btn-reset"
          @click="onReset"
          icon="el-icon-refresh"
          >重置</el-button
        >
      </div>
      <div class="clearfix"></div>
    </el-form>
  </div>
</template>

<script>
import formItem from "./formItem";
import { tools } from "@/utils/tools";
import { number } from "echarts";

export default {
  props: {
    /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   element: 'el-input', // 指定elementui组件
     *   initValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // elementui组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
     *   events: { // elementui组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意elementui组件支持的方法
     *   }
     *   ...... // 可添加任意elementui组件支持的属性
     * }]
     */
    formOptions: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
    // 提交按钮项，多个用逗号分隔（search, export, reset）
    btnItems: {
      type: String,
      default() {
        return "search";
      },
    },
    formLabelWidth: {
      type: String,
      default: '70px'
    },
  },
  // props: ["formLabelWidth"],
  data() {
    return {
      formData: {},
    };
  },

  computed: {
    newKeys() {
      return this.formOptions.map((v) => {
        return this.createUniqueString();
      });
    },
  },

  created() {
    this.addInitValue();
  },

  methods: {
    createUniqueString() {
      const timestamp = +new Date() + "";
      const randomNum = parseInt((1 + Math.random()) * 65536) + "";
      return (+(randomNum + timestamp)).toString(32);
    },
    // 校验
    onValidate(callback) {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // console.log("提交成功");
          // console.log(this.formData);
          callback();
        }
      });
    },
    // 搜索
    onSearch() {
      this.onValidate(() => {
        this.$emit("onSearch", this.formData);
      });
    },
    // 导出
    onExport() {
      this.onValidate(() => {
        this.$emit("onExport", this.formData);
      });
    },
    onReset() {
      this.$refs.formRef.resetFields();
      // console.log(this.formData,'formData');
      this.$emit("onReset", this.formData);
      this.addInitValue()
    },
    // 添加初始值
    addInitValue() {
      const obj = {};
      this.formOptions.forEach((v) => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue;
        }
      });
      this.formData = obj;
    },
  },

  components: { formItem },
};
</script>

<style lang='less' scoped>
.search-form-box {
  margin-bottom: 5px;
  clear: both;

  .btn-box {
    padding-top: 5px;
    display: flex;
    button {
      height: 28px;
    }
  }
  .search {
    float: right;
   
  }
  .clearfix {
  clear: both;
}
//   .search::after {
//   content: "";
//   display: table;
//   clear: both;
// }
  .el-form {
    /deep/ .el-form-item__label {
      padding-right: 0;
      margin-bottom: 10px;
    }
    .el-form-item {
      margin-bottom: 0;

      &.is-error {
        margin-bottom: 25px;
      }
    }
    // el-input宽度
    /deep/ .form-item {
      > .el-input:not(.el-date-editor) {
        width: 200px;
      }
    }
    /deep/ .el-select {
      width: 200px;
    }
    /deep/ .el-cascader {
      width: 200px;
    }
  }
}
</style>

